<script setup lang="ts">
import IconFont from "@/components/IconFont/IconFont.vue";
import GardenCrop, {Corn, Pea} from "@/modal/GardenCrop";
import {IconColor, IconType} from "@/components/IconFont/type";
import {computed, type Reactive, reactive, watch} from "vue";
import Score from "@/modal/Score";

interface iCrop {
  corn: Reactive<Corn>;
  pea: Reactive<Pea>;
}

const props = defineProps<iCrop>();
const corn: Reactive<Corn> = props.corn;
const pea: Reactive<Pea> = props.pea;
const growUp: Function = (crop_or_pea: Reactive<GardenCrop>) => {
  emits('emitGrowUp', crop_or_pea);
}
const emits = defineEmits(['emitGrowUp']);
const corn_isRipen = computed(() => corn.isRipen);
const pea_isRipen = computed(() => pea.isRipen);
watch(corn_isRipen, function (value) {
  corn.getAward();
})
watch(pea_isRipen, (value) => {
  pea.getAward();
})

</script>

<template>
  <div class="container">
    <div class="crops"
         @click="growUp(corn)">
      <div v-for="index in corn.ripeStage"
           :class="{active: index <= corn.currentStep}">
        <div v-if="index === corn.ripeStage"
             class="icon-left">
          <IconFont
            :icon-type="IconType.SCORE"
            :number="corn.score"
            :color="IconColor.SCORE"
            font-size="x-large"></IconFont>
        </div>
      </div>
    </div>
    <div class="crops"
         @click="growUp(pea)">
      <div v-for="index in pea.ripeStage"
           :class="{active: pea && index <= pea.currentStep}">
        <div v-if="pea && index === pea.ripeStage "
             class="icon-right">
          <IconFont
            :iconType="IconType.SCORE"
            :number="pea.score"
            :color="IconColor.SCORE"
            font-size="x-large">
          </IconFont>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.crops {
  position: relative;
  top: 5px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 2px;
}

.crops:first-child {
  align-items: flex-end;
}

.crops:last-child {
  align-items: flex-start;
}


.crops > div {
  position: relative;
  display: flex;
  width: 19px;
  height: 19px;
  min-height: 19px;
  margin-top: 2px;
  box-sizing: border-box;
  border: 1px solid rgb(8, 26, 130);
  transition: all .6s;
}

.crops > div:last-child {
  border-radius: 50%;
}

.crops > div.active:not(:first-child) {
  background-color: rgb(8, 26, 130);
}

.crops > div:first-child {
  width: 0;
  height: 0;
  border-width: 10px 10px 0 10px;
  border-color: rgb(8, 26, 130) transparent transparent transparent;
}


.crops > div:first-child::before {
  content: "";
  display: block;
  position: absolute;
  border-width: 8px 8px 0 8px;
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  left: -8px;
  top: -9px;
  transition: all 1s;
}

.crops > div:first-child.active::before {
  border-color: rgb(8, 26, 130) transparent transparent transparent;
}

.icon-left {
  margin-left: -40px;
  align-self: center;
}

.icon-right {
  margin-top: -46px;
  margin-left: 2px;
  align-self: center;
}

</style>
